<template>
  <view class="tab-bar" :style="'background:' + backgroundColor + ';border-color:'+ borderColor" v-if="list && list.length > 0">
    <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index)">
      <image v-if="selected === item.name" class="tab-bar-item-image" :src="item.activeIconPath"></image>
      <image v-else-if="theme === 'black'" class="tab-bar-item-image" :src="item.whiteIconPath"></image>
      <image v-else class="tab-bar-item-image" :src="item.grayIconPath"></image>
      <view class="tab-bar-item-text" :style="'font-size:' + 30 + 'rpx;color:' + (selected === item.name ? activeColor : color)">{{ item.text }}</view>
    </view>
    <view class="tab-bar-item btn-create" @tap="goCreate">
      <view class="icon">
        <view :style="'font-size:' + 45 + 'rpx;color:#fff'">AI</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
name:"customTabtar",
  props: {
    selected: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#666"
    },
    backgroundColor: {
      type: String,
      default: "#ffffff"
    },
    borderColor: {
      type: String,
      default: "#f2f2f2"
    },
    theme: {
      type: String,
      default: "white"
    }
  },
	data() {
		return {
      fontSize: 24,
      activeColor: "#ea4679",
		  list: [
        {
          "name": "index",
          "pagePath": "/pages/index/index",
          "text": "首页",
          "whiteIconPath": "/static/tabbar/ic_index_white.png",
          "grayIconPath": "/static/tabbar/ic_index_gray.png",
          "activeIconPath": "/static/tabbar/ic_index_active.png"
        },
        {
          "name": "clone",
         
          "text": "",
        
        },
        // {
        //   "name": "zuopin",
        //   "pagePath": "/pages/zuopin/index",
        //   "text": "我的作品",
        //   "whiteIconPath": "/static/tabbar/ic_zuopin_white.png",
        //   "grayIconPath": "/static/tabbar/ic_zuopin_gray.png",
        //   "activeIconPath": "/static/tabbar/ic_zuopin_active.png"
        // },
        {
          "name": "my",
          "pagePath": "/pages/my/my",
          "text": "个人中心",
          "whiteIconPath": "/static/tabbar/ic_user_white.png",
          "grayIconPath": "/static/tabbar/ic_user_gray.png",
          "activeIconPath": "/static/tabbar/ic_user_active.png"
        }
		  ]
		};
	},
	onLoad() {

	},
	methods: {
		switchTab(index) {
      var item = this.list[index]
			uni.switchTab({
				url: item.pagePath
			});
		},
    goCreate() {
      uni.navigateTo({
        url: '/pages/chat/index'
      })
    }
	}
}
</script>

<style>
.tab-bar {
  width: 100%;
  height: 170rpx;
  background: white;
  display: flex;
  background-position: center center;
  background-size: 100% 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: content-box;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  border-top-width: 2rpx;
  border-top-style: solid;
  /*兼容 IOS<11.2*/
  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  position: relative;
  flex: 1;
}
.tab-bar-item:nth-child(1) {
  margin-left: 0rpx;
}
.tab-bar-item:nth-child(2) {
 
}
.tab-bar-item:nth-child(3) {
  margin-right: 0rpx;
}


.tab-bar-item-image {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 95rpx;

  top: 18rpx;
  transition: all .2s;
}

.tab-bar-item-text {
  font-size: 30rpx;
  line-height: 30rpx;
  position: absolute;
  top: 82rpx;
  left: 0;
  width: 100%;
  text-align: center;
}

@keyframes streamer {
  0% {
    left: -1000%;
  }
  100% {
    left: 1000%;
  }
}

.btn-create {
  width: 110rpx;
  height: 110rpx;
  position: absolute;
  top: -30rpx;
  left: 50%;
  margin-left: -55rpx;
  border-radius: 100rpx;
  background: #ea4679;
  overflow: hidden;
}
.btn-create .icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-create::before {
  animation: streamer 5s infinite;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-45deg);
  width: 100%;
}
</style>
